<!-- 省级地图 -->

<template>
  <div :style="{ width: width, height: height }">
    <div :id="id" :ref="id" :style="{ width: width, height: height }"></div>
  </div>
</template>

<script>
import echarts from "echarts";

export default {
  name: "province",
  props: {
    id: {
      required: true,
      type: String,
      default: "provincial",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "100%",
    },
    provincialData: {
      type: Object,
      default: () => {
        return {
          params: {},
          obj: {
            province: "江苏",
            provinceName: "jiangsu",
          },
        };
      },
    },
  },
  data() {
    return {
      echart: null,
      option: {
        title: {
          text: "",
          top: "8%",
          left: "8%",
          textStyle: {
            fontSize: 14,
            fontWeight: 500,
            color: "#fff",
          },
        },
        tooltip: {
          padding: 0,
          // 数据格式化
          formatter: function (params, callback) {
            return params.name + "：" + (params.value || 0);
          },
        },
        legend: {
          orient: "vertical",
          top: "9%",
          left: "5%",
          icon: "circle",
          data: [],
          selectedMode: "single",
          selected: {},
          itemWidth: 12,
          itemHeight: 12,
          itemGap: 30,
          inactiveColor: "#b6d7ff",
          textStyle: {
            color: "#ec808d",
            fontSize: 14,
            fontWeight: 300,
            padding: [0, 0, 0, 15],
          },
        },
        // visualMap: {
        //   min: 0,
        //   max: 500,
        //   left: "left",
        //   top: "bottom",
        //   text: ["高", "低"], // 取值范围的文字
        //   inRange: {
        //     color: ["#e0ffff", "blue"], // 取值范围的颜色
        //   },
        //   show: true, // 图注
        // },
        geo: {
          map: "china",
          zoom: 1,
          roam: true, //放大缩小地图、可拖拽
          label: {
            normal: {
              show: true, //省份名展示
              fontSize: "10", //省份字体大小
              color: "#fff", //省份字体颜色
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "#fff", //鼠标移入省份字体颜色变化
                fontSize: "14px", //鼠标移入省份字体大小变化
              },
            },
          },
          itemStyle: {
            normal: {
              borderColor: "black", //地图边框颜色
              areaColor: "skyblue", //地图背景颜色
            },
            emphasis: {
              show: true,
              areaColor: "#357375", //鼠标放到地图上显示的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
          //点击省份后背景颜色改变
          select: {
            itemStyle: {
              color: "yellow",
              areaColor: "#357375", //点击省份后背景颜色改变
            },
          },
        },
        series: [
          {
            name: "省份数据",
            type: "map",
            geoIndex: 0, // 不可缺少，否则无tooltip 指示效果
            data: [],
          },
        ],
        provinceJSON: {},
        provinceName: "",
      },
    };
  },
  watch: {
    provincialData: {
      handler(newValue, oldValue) {
        this.initEchart();
      },
      deep: true,
      immediate: true,
    },
  },
  created() {},
  mounted() {
    this.initEchart();
    if (this.chart) {
      window.addEventListener("resize", this.chart.resize);
    }
  },
  methods: {
    initEchart() {
      const provinceName = this.provincialData.obj.provinceName;
      const province = this.provincialData.obj.province;
      this.provinceName = provinceName;
      this.provinceJSON = require("../../../utils/chinaMap/省份数据/json(省份)/" +
        provinceName);
      this.option.title.text = province;
      this.option.geo.map = province;
      if (this.$refs[this.id]) {
        this.echart = echarts.init(this.$refs[this.id]);
      }
      this.$echarts.registerMap(province, this.provinceJSON);
      this.echart.setOption(this.option);
    },
  },
};
</script>
<style scoped>
.provinceCharts {
  height: 400px;
  width: 600px;
  margin: auto;
}
</style>
